---
created:
  source_filename: /home/runner/work/mknodes/mknodes/mknodes/pages/mkclasspage/__init__.py
  source_function: MkClassPage.__init__
  source_line_no: 46
hide:
- toc
icon: material/square-medium
status: new
template: The nodes/Image nodes/mkcard.html
title: MkCard
---

[:fa-brands-github: Show source on GitHub](https://github.com/phil65/mknodes/blob/main/mknodes/basenodes/mkcard/__init__.py)

### A card node, displaying an image, a button-like label and a hover caption.

!!! info "Description"

    This node requires addtional CSS to work.


=== "Examples"
    ### Example: **With link**
    !!! jinja "Jinja"
        ``` {.jinja }
        {{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }}

        ```

    !!! python "Python"
        ``` {.python }
        MkCard('Title', 'https://picsum.photos/300', target='https://phil65.github.io/mknodes/')
        ```

    ===! "Rendered"
        <a href="https://phil65.github.io/mknodes/">
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>
        </a>

    === "Markdown"
        ``` {.markdown }
        <a href="https://phil65.github.io/mknodes/">
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>
        </a>

        ```

    === "Html"
        ``` {.html }
        <p><a href="https://phil65.github.io/mknodes/"></p>
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>
        <p></a></p>
        ```

    ### Example: **With caption**
    !!! jinja "Jinja"
        ``` {.jinja }
        {{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }}

        ```

    !!! python "Python"
        ``` {.python }
        MkCard('Title', 'https://picsum.photos/300', caption='Caption')
        ```

    ===! "Rendered"
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
        <div class="overlay">Caption</div>
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>

    === "Markdown"
        ``` {.markdown }
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
        <div class="overlay">Caption</div>
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>

        ```

    === "Html"
        ``` {.html }
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300" alt="Title" style="width:200px,height:200px">
        <div class="overlay">Caption</div>
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>
        ```

    ### Example: **Separate dark mode image**
    !!! jinja "Jinja"
        ``` {.jinja }
        {{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }}

        ```

    !!! python "Python"
        ``` {.python }
        MkCard('Title', 'https://picsum.photos/300', path_dark_mode='https://picsum.photos/200')
        ```

    ===! "Rendered"
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300#only-light" alt="Title" style="width:200px,height:200px">
        <img src="https://picsum.photos/200#only-dark" alt="Title" style="width:200px,height:200px">
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>

    === "Markdown"
        ``` {.markdown }
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300#only-light" alt="Title" style="width:200px,height:200px">
        <img src="https://picsum.photos/200#only-dark" alt="Title" style="width:200px,height:200px">
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>

        ```

    === "Html"
        ``` {.html }
        <div class="card">
        <div class="showcase-container">
        <img src="https://picsum.photos/300#only-light" alt="Title" style="width:200px,height:200px">
        <img src="https://picsum.photos/200#only-dark" alt="Title" style="width:200px,height:200px">
        </div>
        <p>
        <button>Title</button>
        </p>
        </div>
        ```


=== "DocStrings"
    ::: mknodes.MkCard
        options:
          show_docstring_description: False



=== "Base classes"
    | Name | Children | Inherits |
    |--- | --- | --- |
    | **<font size='4'>[MkTemplate](https://phil65.github.io/mknodes/)</font>**<br>*<font size='1'>mknodes.templatenodes.mktemplate</font>*<br>Node representing a jinja template\. | <ul><li>[MkCliDoc](https://phil65.github.io/mknodes/)</li><li>[MkMaterialBadge](https://phil65.github.io/mknodes/)</li><li>[MkImageCompare](https://phil65.github.io/mknodes/)</li><li>[MkImageSlideshow](https://phil65.github.io/mknodes/)</li><li>[MkIFrame](https://phil65.github.io/mknodes/)</li><li>[MkCard](https://phil65.github.io/mknodes/)</li><li>[MkInstallGuide](https://phil65.github.io/mknodes/)</li><li>[MkCodeOfConduct](https://phil65.github.io/mknodes/)</li><li>[MkCommitConventions](https://phil65.github.io/mknodes/)</li><li>[MkPullRequestGuidelines](https://phil65.github.io/mknodes/)</li><li>[MkDevEnvSetup](https://phil65.github.io/mknodes/)</li><li>...</li></ul> | <ul><li>[MkContainer](https://phil65.github.io/mknodes/)</li></ul> |

=== "⋔ Inheritance diagram"
    ``` mermaid
    graph TD
      94420313754832["mkcard.MkCard"]
      94420311501888["mktemplate.MkTemplate"]
      94420312299136["mkcontainer.MkContainer"]
      94420313076768["mknode.MkNode"]
      94420313236736["node.Node"]
      140608527347936["builtins.object"]
      94420311501888 --> 94420313754832
      94420312299136 --> 94420311501888
      94420313076768 --> 94420312299136
      94420313236736 --> 94420313076768
      140608527347936 --> 94420313236736
    ```
=== "NodeFile"
    ``` {.toml  title='/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkcard/metadata.toml'}
    [metadata]
    icon = "mdi:square-medium"
    status = "new"
    name = "MkCard"
    group = "image"

    [[resources.css]]
    filename = "grid.css"

    [examples.with_link]
    title = "With link"
    jinja = """
    {{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }}
    """

    [examples.with_caption]
    title = "With caption"
    jinja = """
    {{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }}
    """

    [examples.dark_mode_image]
    title = "Separate dark mode image"
    jinja = """
    {{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }}
    """

    [output.markdown]
    template = """
    {% set image = (node.image ~ "#only-light") if node.path_dark_mode else node.image %}
    {% if node.target %}<a href="{{ node.target | get_url }}">
    {% endif %}
    <div class="card">
    <div class="showcase-container">
    <img src="{{ image }}" alt="{{ node.title }}" style="width:{{ node.size }}px,height:{{ node.size }}px">
    {% if node.path_dark_mode %}<img src="{{ node.path_dark_mode }}#only-dark" alt="{{ node.title }}" style="width:{{ node.size }}px,height:{{ node.size }}px">
    {% endif %}
    {% if node.caption %}<div class="overlay">{{ node.caption }}</div>
    {% endif %}
    </div>
    <p>
    <button>{{ node.title }}</button>
    </p>
    </div>
    {% if node.target %}</a>
    {% endif %}
    """

    ```
=== "Code"
    ``` {.python  title='mknodes.basenodes.mkcard.MkCard' linenums='20'}
    class MkCard(mktemplate.MkTemplate):
        """A card node, displaying an image, a button-like label and a hover caption.

        This node requires addtional CSS to work.
        """

        ICON = "material/square-medium"
        STATUS = "new"
        CSS = [resources.CSSFile("grid.css")]

        def __init__(
            self,
            title: str,
            image: str,
            *,
            caption: str | None = None,
            target: linkprovider.LinkableType | None = None,
            size: int = CARD_DEFAULT_SIZE,
            path_dark_mode: str | None = None,
            **kwargs: Any,
        ):
            """Constructor.

            Args:
                title: Button text
                image: Card image
                caption: Image caption
                target: Link target. Can be a URL, an MkPage, or an MkNav
                size: Height/Width of the card
                path_dark_mode: Optional alternative image for dark mode
                kwargs: keyword arguments passed to parent
            """
            super().__init__("output/markdown/template", **kwargs)
            self.target = target
            self.title = title
            self.image = image
            self.caption = caption
            self.size = size
            self.path_dark_mode = path_dark_mode

        @classmethod
        def for_page(cls, page: mkpage.MkPage):
            assert page.icon, "Page must have an icon"
            image = mkbinaryimage.MkBinaryImage.for_icon(page.icon)
            card = MkCard(
                page.title,
                image=image.path,
                caption=page.subtitle or "",
                target=page,
            )
            card.add_file(image.path, image.data)
            return card

    ```